<script setup>
import {ref,computed} from "vue";
const value1 = ref(0);
const value2=ref(0)
const value3=ref(0)
const currentPage = ref(1);
const itemsPerPage = ref(5);
const searchText = ref("");
let searching = ref(false);
const type = ref(["shuati","zuopin"]);

const slicedItems = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = currentPage.value * itemsPerPage.value;
  return allList[value1.value].slice(startIndex, endIndex);
});
const filterItemsSlicedItems = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = currentPage.value * itemsPerPage.value;
  return filterItems.value.slice(startIndex, endIndex);
});
const filterItems = computed(() => {
  return allList[value1.value].filter((item) => {
    if (type.value.length === 2){
      return item.test.includes(searchText.value);
    }
    if (type.value.length === 1) {
      return item.type === type.value[0] &&item.test.includes(searchText.value);
    }
  });
});
const option1 = [
  { text: '前端框架应用项目开发', value: 0 },
  { text: '专业技能综合实践（2024春季）', value: 1 },
  { text: '24春季进销存系统设计与实现', value: 2 },
];

const option2 = [
  { text: '刷题', value: 0 },
  { text: '作品', value: 1 },
];
const pagenum = [
  { text: '50条/页', value: 0 },
  { text: '100条/页', value: 1 },
  { text: '150条/页', value: 2 },
  { text: '200条/页', value: 3 },
];
const allList = [
    [
      {test: 'vue3开发初体验',weights:"7.5" , endTime: '2022-05-15 12:00:00', score: 80,type:"shuati"},
      {test: 'vue4开发进阶',weights:"20.0" , endTime: '2022-05-20 12:00:00', score: 80,type:"zuopin"},
      {test: 'vue5开发实战',weights:"100.0" , endTime: '2022-05-25 12:00:00', score: 80,type:"shuati"},
        {test: 'vue6开发深入',weights:"100.0" , endTime: '2022-05-30 12:00:00', score: 80,type:"zuopin"},
      {test: 'vue7开发专家',weights:"100.0" , endTime: '2022-06-05 12:00:00', score: 80,type:"zuopin"},
      {test: 'vue8开发大师',weights:"100.0" , endTime: '2022-06-10 12:00:00', score: 80,type:"shuati"}
    ],
    [
      {test: '填写实践计划',weights:"100.0" , endTime: '2022-05-30 12:00:00', score: 80,type:"zuopin"},
      {test: '上交考核表',weights:"100.0" , endTime: '2022-06-05 12:00:00', score: 80,type:"zuopin"},
      {test: '提交作品',weights:"100.0" , endTime: '2022-06-10 12:00:00', score: 80,type:"shuati"},
    ],
    [
      {test: '复习',weights:"100.0" , endTime: '2022-05-30 12:00:00', score: 80,type:"shuati"},
      {test: '库表练习',weights:"100.0" , endTime: '2022-05-30 12:00:00', score: 80,type:"zuopin"},
      {test: '员工管理',weights:"100.0" , endTime: '2022-05-30 12:00:00', score: 80,type:"shuati"},
    ]
]


function onCancel() {
  if (!type){
    searchText.value = "";
    searching.value = false;
  }
}
function onInput() {
  if (searchText.value === ""&&!type){
    searching.value=false;
  }else {
    searching.value=true;
  }
}
function handleCurrentChange(val) {
  currentPage.value = val;
}
function handleCommand(index) {
  value1.value = index
}
</script>
<template>
  <div class="personal">
    <el-row class="header">
      <el-col :span="24" class="col">
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            {{ option1[value1].text }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in option1" :key="index" :command="index">{{ item.text }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row class="filters" justify="center">
      <el-col class="col">
        <el-checkbox-group v-model="type" @change="onInput">
          <el-checkbox label="shuati">刷题</el-checkbox>
          <el-checkbox label="zuopin">作品</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
    <div class="textcontent">
      <p>测试学生3 333333333333 22软件技术3班</p>
    </div>
    <el-row class="quit" justify="space-around">
      <el-col>课程名:<span class="bluetext">{{ option1[value1].text }}</span><el-button type="primary">退出</el-button></el-col>
    </el-row>
    <el-row class="search">
      <el-col :span="24">
        <el-input v-model="searchText" placeholder="请输入搜索关键词" clearable @clear="onCancel" @input="onInput">
          <template #append>
            <el-button icon="el-icon-search"></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="testListTitle" justify="space-around">
      <el-col class="title listItem" :span="4">任务</el-col>
      <el-col class="title listItem" :span="6">权重占比</el-col>
      <el-col class="title listItem" :span="6">截止时间</el-col>
      <el-col class="title listItem" :span="4">得分</el-col>
    </el-row>
    <el-row v-if="searching" class="testListItem" v-for="item in filterItemsSlicedItems" :key="item.id" justify="space-around" :style="{ backgroundColor: item.score < 60 ? '#f5bbbb' : (item.score >= 90 ? '#b4d4b4' : '') }">
      <el-col class="listItem id" :span="6">{{ item.test }}</el-col>
      <el-col class="listItem name" :span="4">{{ item.weights }}</el-col>
      <el-col class="listItem" :span="6">{{ item.endTime }}</el-col>
      <el-col class="listItem" :span="4">{{ item.score }}</el-col>
    </el-row>
    <el-row v-else class="testListItem" v-for="item in slicedItems" :key="item.id" justify="space-around" :style="{ backgroundColor: item.score < 60 ? '#f5bbbb' : (item.score >= 90 ? '#b4d4b4' : '') }">
      <el-col class="listItem id" :span="6">{{ item.test }}</el-col>
      <el-col class="listItem name" :span="4">{{ item.weights }}</el-col>
        <el-col class="listItem" :span="6">{{ item.endTime }}</el-col>
        <el-col class="listItem" :span="4">{{ item.score }}</el-col>
    </el-row>

    <el-row v-if="searching" class="buttom" justify="space-around">
      <el-col :span="4" class="col">
        <div>共{{ filterItems.length }}条</div>
      </el-col>
      <el-col :span="6">
        <el-pagination
            v-model="currentPage"
            :page-size="itemsPerPage"
            :total="filterItems.length"
            :pager-count="filterItems.length % itemsPerPage === 0 ? filterItems.length / itemsPerPage : Math.floor(filterItems.length / itemsPerPage) + 1"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-row v-else class="buttom" justify="space-around">
      <el-col :span="4" class="col">
        <div>共{{ allList[value1].length }}条</div>
      </el-col>
      <el-col :span="6">
        <el-pagination
            v-model="currentPage"
            :page-size="itemsPerPage"
            :total="allList[value1].length"
            :pager-count="allList[value1].length % itemsPerPage === 0 ? allList[value1].length / itemsPerPage : Math.floor(allList[value1].length / itemsPerPage) + 1"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.personal {
  width: 90%;
  min-height: 600px;
  margin: 0 auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header {
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.filters {
  padding: 10px 0;
  width: auto;
  text-align: center;
}

.textcontent {
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  padding: 10px 0;
}

.bluetext {
  color: #409eff;
}

.quit {
  align-items: center;
  padding: 10px 0;
  text-align: center;
}

.search {
  padding: 10px;
}

.testListTitle {
  width: 90%;
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  margin: 0 auto;
  font-weight: bold;
}

.testListItem {
  width: 90%;
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  margin: 0 auto;
  font-size: 0.9rem;
  align-items: center;
  font-family: "Microsoft YaHei";

  .listItem {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.buttom {
  width: 90%;
  height: 40px;
  margin-top: 10px;
  align-items: center;
}

.footer {
  height: 30px;
}
</style>